<template>
    <div>
        <div>
            <h4 class="font-weight-bold">接口测试</h4>
            <p> This page is an example of basic layout. For more options use
                <strong>Vue starter template generator</strong> in the docs.</p>
        </div>
        <b-card header="企查查-企业工商数据查询：根据KeyNo获取照面信息" header-tag="span" class="mb-4">
            <Row>
                <i-col span="12">
                    <Form ref="testInterfaceForm" :model="testInterfaceForm" :rules="formRule" :label-width="100">
                        <FormItem label="示例：">
                            <Row>
                                <i-col span="12">
                                公司内部关联主键： 4c314cf362f16b971c89304e85463a1c
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="公司内部关联主键" prop="keyNo">
                            <Row>
                                <i-col span="12">
                                <i-input v-model="testInterfaceForm.keyNo" placeholder="请输入公司内部关联主键"></i-input>
                                </i-col>
                            </Row>
                        </FormItem>
                        
                        <FormItem>
                            <Button type="primary" @click="loadData()">提交</Button>
                        </FormItem>
                    </Form>
                </i-col>
                <i-col span="12">
                    <div class="result">
                        <tree-view :data="result" :options="{maxDepth: 3}"></tree-view>
                    </div>
                </i-col>
            </Row>

        </b-card>
    </div>
</template>

<style scoped>
.result {
    width: 100%;
    height: 100%;
    border: 2px dashed gray;
    min-height: 480px;
    background-color: cornsilk;
    padding: 10px;
}
</style>


<script>
import Axios from "axios"
export default {
    name: "TestInterfaceECIDetail",
    data() {
        return {
            result: { code: 200 },
            testInterfaceForm: {
                dtype: "json",
                keyNo: ""
            },
            formRule: {
                keyNo: [
                    {
                        required: true,
                        message: "公司内部关联主键KeyNo不能为空",
                        trigger: "blur"
                    }
                ]
            }
        };
    },

    created() {},
    methods: {
        loadData: function() {
            // console.log(this.testInterfaceForm);
            let vm = this;
            if(vm.testInterfaceForm.keyNo.trim() == ''){
                return false;
            }
            vm.$http.post(
                "/app/v1/apis/1/result",
                this.testInterfaceForm
            )
            .then(
                function(res) {
                    let resp = res.data; // HTTP响应数据
                    let status = res.status; // HTTP响应状态
                    console.log(res);
                    vm.result = res.data;
                },
                function(err) {}
            )
            .catch(function(err) {});
        }
    }
}
</script>
